import { StyleSheet, Text, View } from 'react-native'
import React, {  useState } from 'react'
import { Radio, useToast } from 'native-base'

const TopicItem = (props) => {
  const toast = useToast();
  const { data, index } = props
  const [value, setValue] = useState("");
  // 选择答案
  const selectChange = (key) => {
    console.log('----------')
    console.log(key)
    setValue(key)
    if (key === data.answer) {
      toast.show({
        placement: "top",
        description: "恭喜你！选择正确！"
      })
    } else {
      toast.show({
        placement: "top",
        description: "很遗憾！选择错误！！"
      })
    }
  }
  
  return (
    <View style={styles.topicItem}>
      <Text style={styles.topic}>{index + 1}.{data.title}</Text>
      <View>
        <Radio.Group name="myRadioGroup" accessibilityLabel="favorite number" value={value} onChange={nextValue => {
          selectChange(nextValue);
        }}>
          {
            Object.keys(data.select).map(key => {
              return (
                <View key={key} style={styles.radio}>
                  <Radio value={key}>{key}.{data.select[key]}</Radio>
                </View>
              )
            })
          }
        </Radio.Group>
      </View>
    </View>
  )
}

export default TopicItem

const styles = StyleSheet.create({
  topicItem: {
  },
  topic: {
    fontSize: 24
  },
  radio: {
    display: 'flex',
    justifyContent: 'center',
    width: '100%',
    height: 40,
    backgroundColor: '#fff',
    marginVertical: 5
  },
})